import React, { useState, useEffect } from 'react';
import { get_path } from 'base/ctl/base';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { Sbtn } from '../stock/ctl';
import { InClient } from './in/view';
import { BadInClient } from './badin/view';
import { OutClient } from './out/view';
import { PickClient } from './pick/view';
import { PsnClient } from './psn/view';
import { DataClient } from './data/view';
import { ReAuto } from './reauto/view';
import { OldPick } from './oldpick/view';
import { NgClient } from './ng/view';
import { UnpsnClient } from './unpsn/view';
import { Base } from '../base';

const ClientView = ({ wsn, line }) => {
    const [fin, setFin] = useState();

    useEffect(() => {
        setFin(null);
    }, []);

    if (fin === "in") {
        return <InClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "badin") {
        return <BadInClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "out") {
        return <OutClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "oldpick") {
        return <OldPick hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "reauto") {
        return <ReAuto hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "pick") {
        return <PickClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "data") {
        return <DataClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "psn") {
        return <PsnClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "unpsn") {
        return <UnpsnClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "ng") {
        return <NgClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    }

    const hAction = (tp) => {
        setFin(tp);
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <Title label="后制成库管理" width="w-56"/>
                <Time className="text-2xl"/>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-blue-700 text-2xl text-white py-2 pl-4">入库</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="blue" label="入库" hcmd={() => hAction("in")}/>
                    <Sbtn cl="yellow" label="无数据轴承入库" w="w-64" hcmd={() => hAction("badin")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-teal-700 text-2xl text-white py-2 pl-4">找轴承</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="teal" w="w-64" label="返修工单" hcmd={() => hAction("pick")}/>
                    <Sbtn cl="blue" w="w-64" label="挑出合格单圈" hcmd={() => hAction("data")}/>
                    <Sbtn cl="yellow" w="w-64" label="成品轴承缺失数据" hcmd={() => hAction("psn")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-indigo-700 text-2xl text-white py-2 pl-4">配对数据预处理</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="blue" w="w-64" label="自动配对" hcmd={() => hAction("reauto")}/>
                    <Sbtn cl="teal" w="w-64" label="老单圈" hcmd={() => hAction("oldpick")}/>
                    <Sbtn cl="green" label="按箱解绑工单" w="w-64" hcmd={() => hAction("unpsn")}/>
                    <Sbtn cl="yellow" label="NG单圈" w="w-64" hcmd={() => hAction("ng")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-green-700 text-2xl text-white py-2 pl-4">出库</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="green" label="返修出库" hcmd={() => hAction("out")}/>
                </div>
            </div>
        </div>
    );
};

const AwayClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);

    return (
        <Base wsn={wsn} line={line}>
            <ClientView wsn={wsn} line={line}/>
        </Base>
    );
};

export {AwayClient};
